<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../myCss/flex.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<style type="text/css">
			body {
				background-color: #FFFFFF;
			}
			
			.text-center {
				text-align: center;
				padding: 0px;
				width: 20%;
				overflow: hidden;
			}
			
			.icon-size {
				font-size: 25px;
			}
			
			p {
				margin: 5px;
			}
			
			.weather-left {
				display: inline-block;
				padding: 20px;
			}
			
			.weather-right {
				display: inline-block;
				padding: 20px;
			}
			
			.weather-right>p {
				color: #FFFFFF;
				font-size: 18px;
			}
			
			.weather-left>p {
				color: #FFFFFF;
				font-size: 18px;
			}
			
			.flex-row>div>p {
				color: #000000;
			}
			
			.flex-row>div:active {
				background-color: #C0C0C0;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" style="background-color: #FFFFFF;">
			<div class="flex-row" style="position: fixed;top: 0px;left: 0px;height: 53px;width: 100%;background-color: #FFFFFF;">
				<div id="wheater" class="text-center">
					<p class="iconfont icon-tianqi icon-size" style="color: #0099ff;"></p>
					<p style="color: #0099ff;margin:0px;">潮汐天气</p>
				</div>
				<div id="fishEncyclopedia" class="text-center">
					<p class="iconfont icon-jiankangbaike icon-size"></p>
					<p style="color: #000000;">鱼百科</p>
				</div>
				<div id="fleaMarket" class="text-center">
					<p class="iconfont icon-tiaosaoshichang icon-size"></p>
					<p style="color: #000000;">跳蚤市场</p>
				</div>
				<div id="strategy" class="text-center">
					<p class="iconfont icon-raider icon-size"></p>
					<p style="color: #000000;">攻略</p>
				</div>
				<!--<div id="whereWeGo" class="text-center">
					<p class="iconfont icon-Fishing icon-size"></p>
					<p style="color: #000000;">去哪钓</p>
				</div>-->
			</div>
			<div style="background-color: #0099ff;margin-top: 53px;">
				<div class="weather-left">
					<p style="position: relative;bottom:12px;right: 20px;"><span class="iconfont icon-dingwei3" style="margin-right: 5px;font-size: 20px;"></span>秀英港</p>
					<p><img id="tianqi" src="../imgs/weathercn/0.png" style="width: 25px;" /></span><span id="weather">晴</span></p>
					<p><span id="temp">22</span><span>℃</span></p>
					<p id="windDirect">东南风</p>
					<p id="windpower">3级</p>
				</div>
				<div class="weather-right">
					<!--<p style="position: absolute;top: 75px;right:2em;"><span class="iconfont icon-shijian" style="color: #FFFFFF;font-size: 30px;font-weight: bold;"></span></p>-->
					<p>空气质量:<span id="ivalueAir">优</span></p>
					<p>湿度：<span id="humidity">50</span><span>%</span></p>
					<p>气压：<span id="pressure">1003</span><span>Pa</span></p>
					<p>紫外线强度：<span id="ivalue">中等</span></p>
				</div>
			</div>
			<div id="container" style="height: 300px;">

			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../myJs/ajax.js"></script>
		<script type="text/javascript" src="../js/base64.min.js"></script>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../myJs/timeTool.js"></script>
		<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
		<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
		<script src="http://cdn.hcharts.cn/highcharts/modules/oldie.js"></script>
		<script type="text/javascript">
			mui.init();
			//顶层页面跳转
			mui(".flex-row").on("tap", ".text-center", function() {
				switch(this.id) {
					case "wheater":
						break;
					case "fishEncyclopedia":
						mui.openWindow({
							url: "indexContent/fishEncyclopedia/fishEncyclopedia.html",
							id: "fishEncyclopedia"
						});
						break;
					case "fleaMarket":
						mui.openWindow({
							url: "indexContent/fleaMarket/fleaMarket.html",
							id: "fleaMarket"
						});
						break;
					case "strategy":
						mui.openWindow({
							url: "indexContent/strategy/strategy.html",
							id: "strategy"
						});
						break;
					case "whereWeGo":
						mui.openWindow({
							url: "indexContent/fishEncyclopedia/fishEncyclopedia.html",
							id: "fishEncyclopedia"
						});
						break;
				}
			});
			//曲线图封装
			function lineChart() {
				var chart = Highcharts.chart('container', {
					credits: {
						enabled: false // 禁用版权信息
					},
					chart: {
						type: 'line'
					},
					title: {
						text: '秀英港潮汐图'
					},
					xAxis: {
						categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '23:59'],
						crosshair: true
					},
					yAxis: {
						title: {
							text: '潮高(m)'
						},
						crosshair: true
					},
					plotOptions: {
						line: {
							dataLabels: {
								enabled: false // 开启数据标签
							},
							enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
						},
						series: {
							events: {
								legendItemClick: function(e) {
									return false; // 直接 return false 即可禁用图例点击事件
								}
							}
						}
					},
					series: [{
						name: '潮汐',
						data: [212, 205, 191, 169, 143, 116, 93, 78, 73, 76, 83, 91, 100, 110, 120, 130, 140, 151, 161, 171, 184, 195, 203, 208, 209]
					}]
				});
			}
			//潮汐接口
			function getTide() {
				ajaxPost("/api/v1/tide/getByPortDate", {
					"siteId": "84",
					"date": "2018-04-15"
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == 0) {}
				}, function(err) {
					console.log(JSON.stringify(err));
				});
			}
			//天气接口 
			function getWeather(latitude, longitude) {
				//				console.log(longitude);
				//				console.log(latitude);
				plus.nativeUI.showWaiting('', {
					back: "none"
				});
				mui.ajax('http://jisutianqi.market.alicloudapi.com/weather/query?location=' + latitude + "," + longitude, {
					data: {},
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Authorization': 'APPCODE fd6753f896f0495d8e5b84cd9f2c0079'
					},
					success: function(data) {
						plus.nativeUI.closeWaiting();
						//传入成功的函数，则执行函数
						//						console.log(JSON.stringify(data))
						var weatherArr = []; //存放分小时的天气数据	
						var dayArr = []; //存放分小时的天气数据	
						var week = data.result.week; //星期
						var dateToday = data.result.date; //日期
						var weather = data.result.weather; //天气		
						var humidity = data.result.humidity; //湿度
						var winddirect = data.result.winddirect; //风向
						var windpower = data.result.windpower; //风力
						var temp = data.result.temp; //温度
						var imgId = data.result.img; //图片ID
						var updateTime = data.result.updatetime; //更新时间
						var ivalue = data.result.index[2].ivalue; //紫外线强度
						var ivalueAir = data.result.index[5].ivalue; //紫外线强度
						var pressure = data.result.pressure; // 气压
						document.getElementById('tianqi').src = "../imgs/weathercn/" + imgId + ".png";
						document.getElementById("weather").innerText = weather;
						document.getElementById("humidity").innerText = humidity;
						document.getElementById("windDirect").innerText = winddirect;
						document.getElementById("windpower").innerText = windpower;
						document.getElementById("temp").innerText = temp;
						document.getElementById("weather").innerText = weather;
						document.getElementById("ivalueAir").innerText = ivalueAir;
						document.getElementById("pressure").innerText = pressure;
					},
					error: function(xhr, type, errorThrown) {
						plus.nativeUI.closeWaiting('', {
							back: "none"
						});
					}
				});
			}
			mui.plusReady(function() {
				plus.geolocation.getCurrentPosition(function(data) {
					var latitude = data.coords.latitude;
					var longitude = data.coords.longitude;
					getWeather(latitude, longitude);
				}, function(e) {
					console.log('Gelocation Error: code - ' + e.code + '; message - ' + e.message);
					switch(e.code) {
						case e.PERMISSION_DENIED:
							alert('User denied the request for Geolocation.');
							break;
						case e.POSITION_UNAVAILABLE:
							alert('Location information is unavailable.');
							break;
						case e.TIMEOUT:
							alert('The request to get user location timed out.');
							break;
						case e.UNKNOWN_ERROR:
							alert('An unknown error occurred.');
							break;
					}
				});
//				getTide();
				lineChart();
			})
		</script>
	</body>

</html>